<template>
	<view class="issueText">
		<view class="feik">

		</view>
		<view class="top">
			<view class="top-left">
				<text class="top-left-text" @click="hui"></text>
			</view>
			<view class="top-right">
				<u-button text="下一步" :color="color" shape="circle" :disabled="disabled"></u-button>
			</view>
		</view>

		<view class="Message-field-01">
			<textarea v-model="textareaValue" @input="updateWordCount" name="" id="" cols="53" rows="10"
				class="Message-field-02" placeholder="说说你的想法吧~" maxlength="100"></textarea>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textareaValue: "",
				color: "#fc93a2",
				disabled:false
			}
		},
		methods: {
			updateWordCount() {
				this.wordCount = this.textareaValue.length;
			},
			hui(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		watch: {
			textareaValue(newValue, oldValue) {
				// 当文本域的值发生变化时，这个函数会被调用
				if (newValue !== this.originalValue) {
					this.color = "#f72647"
				}
				this.updateWordCount();
			}
		},
	}
</script>

<style scoped>
	.issueText {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.feik {
		width: 100%;
		height: 88rpx;
	}

	.top {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.top-left-text::before {
		font-family: "iconfont" !important;
		content: "\e64e";
		font-size: 50rpx;
	}

	.top-left {
		width: 45%;
	}

	.top-right {
		width: 25%;
		display: flex;
		justify-content: right;
	}

	.Message-field-02 {
		width: 650rpx;
		height: 300rpx;
		border-radius: 16px;
		background-color: #fff;

	}
</style>